<template>
  <ql-card>
    <template #header>
      <div class="overflow-hidden">
        <div>基础列表及其分页，任务中心批量上传下载</div>
        <div>约定: 筛选数据中，参数为 createAt:[] 的时间范围选择器，任务中心批量上传下载会自动处理成startTime:'', endTime:''</div>
        <div>其他参数需自己手动处理</div>

        <!-- 按钮权限设置 v-btn[xxx]="$route" -->
        <el-button
          v-btn:test="$route"
          @click="search"
        >
          Submit
        </el-button>
        <!--
      data: 下载任务传递的筛选参数
      type: 类型
      UPLOAD_TASK_WAYBILL 运单
      UPLOAD_TASK_DRIVER 司机
      UPLOAD_TASK_CAR 车辆
      -->
        <app-task
          :data="listParams"
          type="UPLOAD_TASK_DRIVER"
        />
      </div>
    </template>

    <el-table
      v-loading="loading"
      :data="list"
    >
      <el-table-column
        prop="date"
        label="日期"
      />
      <el-table-column
        prop="name"
        label="姓名"
      />
      <el-table-column
        prop="address"
        label="地址"
      />
    </el-table>

    <ql-pagination
      v-model:current-page="page"
      v-model:page-size="limit"
      :total="total"
      :disabled="loading"
    />
  </ql-card>
</template>
<script setup>
import { useTable } from 'qin-lantern'
// 模拟接口延时
let delayedTime = null
const delayed = (data) => {
  return new Promise((resolve, reject) => {
    delayedTime = setTimeout(() => {
      resolve(data)
      clearTimeout(delayedTime)
      delayedTime = null
    }, 2000)
  })
}

// form表单搜索及列表
const tableData = [{
  date: '2016-05-02',
  name: '王小虎',
  address: '上海市普陀区金沙江路 1518 弄'
}, {
  date: '2016-05-04',
  name: '王小虎',
  address: '上海市普陀区金沙江路 1517 弄'
}, {
  date: '2016-05-01',
  name: '王小虎',
  address: '上海市普陀区金沙江路 1519 弄'
}, {
  date: '2016-05-03',
  name: '王小虎',
  address: '上海市普陀区金沙江路 1516 弄'
}]

// 列表数据
// eslint-disable-next-line no-unused-vars
const [loading, list, total, page, limit, search, loadList] = useTable(async () => {
  list.value = await delayed(tableData) // 模拟调用接口
  total.value = Math.ceil(Math.random() * 100) // 返回总条数
})

// const list = ref([])
// const total = ref(0)
const listParams = reactive({
  page,
  limit
})
// const listLoading = ref(false)

// const loadList = async () => {
//   listLoading.value = true
//   list.value = await delayed(tableData).finally(() => {
//     listLoading.value = false
//   })
//   total.value = Math.ceil(Math.random() * 100)
// }

// const onSubmit = async () => {
//   listParams.page = 1 // 查询默认从第1页开始
//   loadList()
// }
</script>

<style scoped lang='scss'>

</style>
